<template>
  <div class="grid">
    <div>
<!--      <loading _nghost-ng-cli-universal-c62="">&lt;!&ndash;&ndash;&gt;&lt;!&ndash;&ndash;&gt;</loading>-->
    </div>
    <div class="pay-panel">
      <div class="card p-4 shadow-2">
        <div class="text-c-101"><span class="ng-star-inserted">{{$t('当前积分')}}: ¥{{this.$store.state.point}} <!----></span><!----></div>
        <div>
          <div class="text-c-102" for="topUpCredit-input">{{$t('充值金额')}} (CNY)</div>

          <el-form ref="from" :model="form" :rules="rules">
            <el-form-item prop="amount">
              <el-input type="number"
                        id="topUpCredit-input"
                        min="1"
                        placeholder="输入充值金额 (CNY)"
                        v-model="form.amount">

              </el-input>
            </el-form-item>
          </el-form>

        </div>

        <div style="margin-top: 10px; margin-bottom: 1rem;">
          <p class="text-center lg:text-left"
                    style="margin-bottom: 4px;">{{$t('快速选择充值金额')}}
          </p>
          <el-button @click="form.amount = amountAvail"
                     style="background: white;color: #3b82f6;font-size: 15px;width: 24%;margin: 1px;border: #3b82f6 solid 1px;border-radius: 5px;"
                     v-for="amountAvail in amountAvails" :key="amountAvail">
            {{ amountAvail }}元
          </el-button><!---->
        </div>
        <div class="ng-star-inserted">
          <div class="field-radiobutton">
              <el-radio-group v-model="radio" style="display: flex;flex-wrap: nowrap;">
                <el-radio style="width: 50%" name="aliPay" value="0" inputid="aliPay" :label="0">
                  <label for="aliPay"
                         class="mr-3 ng-star-inserted">{{$t('支付宝支付')}}
                    <span style="color: red;" class="ng-star-inserted">({{$t('免手续费')}})</span><!----><!---->
                  </label>
                </el-radio>
                <el-radio name="weChatPay" inputid="weChatPay" value="1" :label="1">
                  <label for="weChatPay"
                         class="mr-3 ng-star-inserted">{{$t('微信支付')}}
                  <!----><span style="color: red;" class="ng-star-inserted">(1% {{$t('手续费')}})</span><!---->
                  </label>
                </el-radio>
              </el-radio-group>
          </div>
        </div><!----><!---->
        <p class="ng-star-inserted"> {{$t('应付')}} <b class="ng-star-inserted">{{ form.amount }}</b><!----><!----> {{$t('元，到账')}} <b>{{form.amount * (1-0.01)}}</b>
          {{$t('积分')}} </p><!----><!----><!----><!---->
        <div class="mt-1">
          <div style="text-align: center;"><span style="font-size: 12pt;"><strong>{{$t('温馨提示')}}</strong></span></div>
          <div style="text-align: left;"><span style="font-size: 10pt; color: rgb(224, 62, 45);">{{$t('1、充值积分＜10时不支持提现，仅能用于平台消费；')}}</span>
          </div>
          <div style="text-align: left;">&nbsp;</div>
          <div style="text-align: left;"><span style="font-size: 10pt; color: rgb(224, 62, 45);">{{$t('2、如需申请提现积分必须≥10，提现需1%手续费；')}}</span>
          </div>
          <div style="text-align: left;">&nbsp;</div>
          <div style="text-align: left;"><span style="font-size: 10pt; color: rgb(224, 62, 45);">{{$t('3、充值积分≥500可联系人工客服免手续费充值。')}}</span>
          </div>
        </div>
        <div class="mt-2 mb-2" style="display: flex">
          <el-checkbox id="agreeTerm"
                       v-model="agreeCheck"
                       style="width: fit-content"
                       name="agreeTerm">
            <label for="agreeTerm" class="font-semibold" style="color: red; padding-bottom: 2px;">{{$t('我已查看以上说明')}}</label>
          </el-checkbox>

        </div>
        <div class="mt-3 text-center">
          <el-button :disabled="!agreeCheck" @click="submit" class="p-ripple p-element mt-2 p-button p-component p-disabled">
            <span class="p-button-label ng-star-inserted">{{$t('确认充值')}}</span>
          </el-button>
        </div>
      </div>
    </div>
    <pay-modal ref="payModal" :visible="visible" :result="apiRes" @closeDialog="closeDialog"></pay-modal>

  </div>
</template>

<script>
import apiService from "@/api/apiService";
import PayModal from './PayModal'
import {isMobile,getUser} from "@/utils";
import Vue from "vue";


export default {
  name: "ReCharge",
  components: { PayModal },
  data() {
    return {
      visible: false,
      amountAvails: [10, 50, 100, 200, 500, 1000, 2000, 5000],
      radio: 0,
      agreeCheck: false,
      form:{
        amount: 1,
      },
      apiRes: {}, // 接口返回数据包
      // keyboard: "",
      // payMethod: "wx",
      // wxpaySvgSrc: require("@/assets/wxpay.svg"),
      // aliPaySvgSrc: require("@/assets/alipay.svg"),
      rules:{
        amount:[
          { required: true, message: '金额不能为空', trigger: 'blur' },
          { validator:this.validateAmount, trigger: 'blur' }
        ]
      },
      user:null,
    };
  },
  created(){
    this.user = getUser()
  },
  watch: {
    amount(amount) {
      if (amount < 1) {
        this.$message({
          msg: "最低可充值1元",
          duration: 3000,
        });
        this.amount = 1;
      }
    },
  },
  methods: {
    closeDialog(val){
      this.visible = val
    },
    submit(){
      this.$refs.from.validate((valid) => {
        if (!valid){
          return false;
        }
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        if (this.agreeCheck) {
          const params = {
            wayCode:"",
            amount:this.form.amount,
            payDataType:""
          }

          if (isMobile()){
            //手机端
            if(this.radio === 0){
              params.wayCode = "ALI_QR"
              params.payDataType = "payUrl"
            }
            //TODO 后面需要调起微信支付
            if(this.radio === 1){
              params.wayCode = "WX_JSAPI"
              params.payDataType = "codeUrl";
            }
          }else{
            //PC端
            if(this.radio === 0){
              params.wayCode = "ALI_QR"
              params.payDataType = "codeImgUrl"
            }
            if(this.radio === 1){
              params.wayCode = "WX_NATIVE"
              params.payDataType = "codeImgUrl"
            }
          }
          apiService.post("/rechange",params).then(res=>{
            this.visible = true
            this.apiRes=res.data
            this.$refs.payModal.showModal(params.wayCode, res.data) // 打开弹窗
            loading.close()
          }).catch(() => {
            Vue.prototype.$message.error("服务器异常,请重试")
            loading.close()
          })
        }
      });
    },
    validateAmount(rule, value, callback){
      value = `${value}`.trim()
      let n = Number(value)
      if (isNaN(n)) {
        return callback(new Error('请输入数字'))
      }

      if (n === 0) {
        return callback()
      }

      // 可见小数位
      let { message } = rule
      const reg = new RegExp(`^[1-9]\\d*$`)
      if (value && !reg.test(value)) {
        callback(new Error(message || '只允许输入正整数'))
      } else {
        return callback()
      }
    },
//     changeAmount(val) {
//       console.log(this.amount);
//       console.log(val);
//     },
//     pay() {
//       if (this.payMethod === "wx") {
//         this.$toast.loading({
//           loadingType: "ring",
//           loadingColor: "green",
//           msg: "支付中...",
//         });
//         setTimeout(() => {
//           this.$toast.close();
//         }, 3000);
//       } else {
//         this.$toast.loading({
//           loadingType: "ring",
//           msg: "支付中...",
//         });
//         setTimeout(() => {
//           this.$toast.close();
//         }, 3000);
//       }
//     },
  },
};
</script>

<style lang="scss" scoped>
.pay-panel {
  box-shadow: 0 0 0 .2rem #00000005;
  border-radius: 10px;
  border: solid white 1px;
  background: rgb(255, 255, 255);
  margin: auto;
  width: 95%;
}

.shadow-2 {
  margin: auto;
  width: 90%;
  padding: 20px 20px 20px 20px;
}

.text-c-101{
  width: 100%;text-align: left;
  font-weight: bolder;
  margin-bottom: 10px;
}

.text-c-102{
  width: 100%;text-align: left;
  font-weight: bolder;
  margin-bottom: 2px;
}

.mb-2 {

}
</style>
